<template>
    <div class="member-add">
        <div class="member-add-card">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a><Icon type="gear-a"></Icon> 基本信息</a>
                        </p>
                        <div class="formCon"  style="height: 410px;">
                            <a class="title">{{title}}</a>
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="60">

                                <!--<FormItem label="用户名" prop="username">-->
                                    <!--<Input v-model="formValidate.username" placeholder="请输入用户名"></Input>-->
                                <!--</FormItem>-->
                                <FormItem label="排序" prop="sort">
                                    <Input v-model="formValidate.sort" placeholder="请输入序列"></Input>
                                </FormItem>
                                <FormItem label="分类" prop="type">
                                    <i-select v-model="formValidate.type">
                                        <i-option value="1">新闻页面</i-option>
                                        <i-option value="2">发现页面</i-option>
                                    </i-select>
                                </FormItem>
                                <!--<FormItem label="链接种类" prop="type">-->
                                    <!--<RadioGroup v-model="formValidate.type">-->
                                        <!--<Radio label="1">文章</Radio>-->
                                        <!--<Radio label="2">商品</Radio>-->
                                        <!--<Radio label="3">微信支付</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->

                                <!--<FormItem label="文章分类" prop="art_type" v-if="formValidate.type==1">-->
                                    <!--<Select v-model="formValidate.art_type" placeholder="请选择文章分类">-->
                                        <!--<Option value="1">美容宝典列表</Option>-->
                                        <!--<Option value="2">公告管理</Option>-->
                                        <!--<Option value="3">注册协议</Option>-->
                                        <!--<Option value="4">特色项目</Option>-->
                                    <!--</Select>-->
                                <!--</FormItem>-->

                                <!--<FormItem label="链接id" prop="url">-->
                                    <!--<Input v-model="formValidate.url" placeholder="请输入链接"></Input>-->
                                <!--</FormItem>-->

                                <!--<FormItem label="会员状态" prop="status">-->
                                    <!--<RadioGroup v-model="formValidate.status">-->
                                        <!--<Radio label="1">启用</Radio>-->
                                        <!--<Radio label="0">停用</Radio>-->
                                    <!--</RadioGroup>-->
                                <!--</FormItem>-->
                            </Form>
                        </div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a><Icon type="ios-cloud-upload-outline"></Icon> 图片上传</a>
                        </p>
                        <Upload accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?" :before-upload="handleBeforeUpload">
                            <div class="upImg">
                                <a><Icon type="ios-cloud-upload" size="52"></Icon></a>
                                <p>点击或将图片拖拽到这里上传</p>
                            </div>
                        </Upload>
                    </Card>
                    <Card style="height: 312px;margin-top: 20px">
                        <p slot="title">
                            <a><Icon type="ios-person"></Icon> 图片展示</a>
                        </p>
                        <a slot="extra" @click="imgUrl = ''"><Icon type="close"></Icon>清除</a>
                        <img class="imgUp" v-if="imgUrl!=''" :src="imgUrl"/>
                    </Card>
                </Col>
            </Row>
            <!--提交-->
            <div class="subCon">
                <ButtonGroup>
                    <Button type="primary" @click="sub" :loading="loading">提交</Button>
                    <Button type="ghost" @click="reset">重置</Button>
                </ButtonGroup>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"member-add",
        data(){
            const validateNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入数字'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error("请输入数字"));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return{
                title:"新增幻灯片",
                formValidate:{
                    sort:'',
                    url:'',
                    type:'',
                    // shangji:"",
                    // tuanbei:"",
                    // dengji:"1",
                    status:"99",
                    level:'1',
                    real_name:'',
                    birthday:'',
                    tuijian_name:'',
                    art_type:'',
                    link_id:'',
                },
                ruleValidate:{
                    name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                    pwd: [{ required: false, message: '请输入密码', trigger: 'blur' }],
                    twopwd: [{ required: false, message: '请输入密码', trigger: 'blur' }],
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                    phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
                    email: [{ required: false, message: '请输入电子邮箱', trigger: 'blur' }],
                    tuijian_name: [{ required: false, message: '请输入推荐人', trigger: 'blur' }],
                    // shangji: [{ required: true, message: '请输入上级推手', trigger: 'blur' }],
                    // tuanbei: [{ required: true, validator: validateNum, trigger: 'blur' }],
                    level: [{ required: true, message: '请选择等级', trigger: 'change' }],
                    status: [{ required: true, message: '请选转状态', trigger: 'change' }],
                    sort: [{ required: true, message: '请输入序列', trigger: 'blur' }],
                    art_type: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
                    type: [{ required: true, message: '请选择种类', trigger: 'change' }],
                    url: [{ required: false, message: '请输入链接', trigger: 'blur' }],
                },
                imgUrl:"",
                loading:false,
                isEdit:false,
                uid:""
            }
        },
        mounted(){
            if(this.$route.query.isEdit){
                this.isEdit = true
                this.id=this.$route.query.id
                this.getData()
                this.title = "修改幻灯片"
            }
        },
        methods:{
            getData(){
                this.getJsonData("Banner/index",{id:this.id})
                    .then((res)=>{
                        this.formValidate.type=res.list[0].type
                        this.formValidate.url=res.list[0].link_id
                        this.formValidate.sort=res.list[0].sort
                        this.imgUrl=res.list[0].pic;
                        this.formValidate.art_type=res.list[0].art_type;
                        // this.formValidate.link_id=res.list[0].link_id
                    })
            },
            handleBeforeUpload(file){
                if((Math.round(file.size/1024*100)/100)<2000){
                    this.caijianImg(file)
                }else{
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 '+file.name +'/'+(Math.round(file.size/1024*100)/100)+'KB'+'，请上传 2M 以内的图片。',
                        duration:4.5
                    });
                }
                //禁止默认上传
                return false
            },
            caijianImg(file){
                let reader = new FileReader();
                reader.onload = () => {
                    this.upImg(reader.result)
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            upImg(image){
                this.upBaseImg("User/uploadPic",{image})
                    .then((res) =>{
                        this.imgUrl=res.url
                    })
            },
            sub(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureSub()
                    }
                })
            },
            sureSub(){
                if(this.imgUrl=="")
                {
                    this.$Message.warning("请上传图片");
                    return;
                }
                this.loading = true;
                let obj = {
                    link_id:this.formValidate.url,
                    type:this.formValidate.type,
                    pic:this.imgUrl,
                    sort:this.formValidate.sort,
                    art_type:this.formValidate.art_type
                };
                if(this.isEdit)this.$set(obj,"id",this.id)
                this.getJsonData("Banner/add",obj,true)
                    .then((res)=>{
                        this.loading = false
                        this.$Message.success(this.isEdit?'修改成功':'新增成功')
                        this.$router.back()
                    })
                    .catch((res)=>{
                        this.loading = false
                    })
            },
            reset(){
                this.imgUrl = ""
                this.$refs.formValidate.resetFields();
            }
        }
    }
</script>
<style lang="less">
    @import "./banner-add";
</style>
